<template>
	<div class="upload-container">
		<div class="button" @click="uploadImage">上传图片</div>
		<el-dialog v-el-drag-dialog :visible="dialogVisible" top="8vh" :before-close="handleClose">
			<zk-file-manage @autoDialogClose="handleClose" @selectFileChildEvent="selectFileChildEvent"></zk-file-manage>
		</el-dialog>
	</div>
</template>

<script>
	import elDragDialog from '@/service/directives/el-dragDialog'
	import ala from 'ala'
	export default {
		directives: {
			elDragDialog
		},
		name: 'EditorSlideUpload',
		props: {
			color: {
				type: String,
				default: '#1890ff'
			}
		},
		data() {
			return {
				viewModel: '',
				dialogVisible: false,
				count: 2
			}
		},
		methods: {
			handleClose() {
				this.dialogVisible = false
			},
			uploadImage() {
				this.dialogVisible = true
			},
			selectFileChildEvent(image) {
				var arr = []
				if (image.substr(0, 1) === '/') {
					arr.push(this.$ala.imgHost + image.substr(1, image.length))
				} else {
					arr.push(this.$ala.imgHost + image.path)
				}
				this.$emit('successCBK', arr)
				this.dialogVisible = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.editor-slide-upload {
		margin-bottom: 20px;

		.el-upload--picture-card {
			width: 100%;
		}
	}

	.button {
		padding: 5px 8px;
		color: #ffffff !important;
		border-radius: 3px;
		display: inline-block;
		background: #409eff;
		cursor: pointer;
	}
</style>